<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="课程号">
        <el-input v-model="formInline.code" placeholder="课程号"></el-input>
      </el-form-item>
      <el-form-item label="课程名">
        <el-input v-model="formInline.name" placeholder="课程名"></el-input>
      </el-form-item>
      <el-form-item label="教师">
        <el-select v-model="formInline.teaching" placeholder="教师">
         <!-- <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>
          <el-option label="软件工程" value="软件工程"></el-option>
          <el-option label="信息安全" value="信息安全"></el-option>
          <el-option label="网络工程" value="网络工程"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加 -->
    <el-button type="primary" @click="handleAddRole()">添加</el-button>


    <!-- 表格区域 -->
   <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
         <!-- <el-table-column align="center" label="序号" width="95">
           <template slot-scope="scope">
             {{ scope.$index+1 }}
           </template> -->
         <el-table-column align="center" label="课程号" width="95">
           <template slot-scope="scope">
             {{ scope.row.code }}
           </template>
         </el-table-column>
         <el-table-column label="课程名" width="95">
           <template slot-scope="scope">
             {{ scope.row.name }}
           </template>
         </el-table-column>
         <el-table-column label="学分" width="110" align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.credit}}</span>
           </template>
         </el-table-column>
         <el-table-column label="教师姓名" width="110" align="center">
           <template slot-scope="scope">
             {{ scope.row.teaching}}
           </template>
         </el-table-column>
         <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button type="primary" size="mini" @click="editc(scope.row.code)">
               修改
             </el-button>
             <el-button size="mini" type="danger">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>

    <!--分页区域-->
    <div class="el-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[6, 10, 12, 14]" :page-size="6" layout="total, sizes, prev, pager, next, jumper" :total="50">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
      <el-form :model="student" label-width="80px" label-position="left">
        <el-form-item label="课程号">
          <el-input v-model="student.code" placeholder="课程号" />
        </el-form-item>
        <el-form-item label="课程名">
          <el-input v-model="student.name" placeholder="课程名" />
        </el-form-item>
        <el-form-item label="教师姓名">
          <el-input v-model="student.teaching" placeholder="教师姓名" />
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="student.credit" placeholder="学分" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSrudent">确定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import {
    getList
  } from '@/api/course/tableC'

  const defaultRole = {
    code: '',
    name: '',
    teaching:'',
    credit:'',
  }

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        // 查询区域
        formInline: {
                  code: '',
                  name: '',
                  teaching: ''
        },
        student: Object.assign({}, defaultRole),
        dialogVisible: false,

        list: null,
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
        // 查询
       onSubmit() {
              console.log('submit!');
       },

        // 添加
       handleAddRole() {
         this.student = Object.assign({}, defaultRole)
         this.dialogType = 'new'
         this.dialogVisible = true
       },

       // 编辑区域
       handleEdit(scope) {
         this.dialogType = 'edit'
         this.dialogVisible = true
         this.student = deepClone(scope.row)
       },

      async confirmSrudent() {
        this.dialogVisible = false
      },

      // 分页区域
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      fetchData() {
        var vm = this;
        getList().then(res => {
          console.log(res.content);
          vm.list = res.content;
        })
      }
    },

  }
</script>
